import React from 'react'
import PropTypes from 'prop-types'
import {Tree,Form,Input} from 'antd'
import routerList from '@/router/menuConfig'
const treeData = routerList


export default class AuthForm extends React.Component {

    static propTypes={
        role:PropTypes.object
    }

    constructor (props) {
        super(props)
    
        // 根据传入角色的menus生成初始状态
        const {menus} = this.props.role
        this.state = {
          checkedKeys: menus
        }
      }
    // 根据新传入的role来更新checkedKeys状态
    // 当组件接收到新的属性时候自动调用
    UNSAFE_componentWillReceiveProps(nextProps){
        this.setState({checkedKeys:nextProps.role.menus})
        // 这样写也可以
        // this.state.checkedKeys = nextProps.role.menus
    }


    UNSAFE_componentWillMount(){

    }
     


    onSelect = (selectedKeys, info) => {
        console.log('selected', selectedKeys, info)
    }
    
    onCheck = (checkedKeys, info) => {
        console.log('onCheck', checkedKeys)
        this.setState({checkedKeys})
    }
    
    render() {
        const {role} = this.props
        const {checkedKeys} =this.state
        const formItemLayout = {
            labelCol: { span: 4 },  // 左侧label的宽度
            wrapperCol: { span: 15 }, // 右侧包裹的宽度
          }
        return (
            <>
               <Form.Item  {...formItemLayout}>
                   <Input value={role.name} disabled/>
               </Form.Item>
               <Tree
                checkable
                defaultExpandAll={true} 
                checkedKeys={checkedKeys}
                onCheck={this.onCheck}
                treeData={treeData}
                />
            </>
        )
    }
}

